<template>
  <view class="haobei">
    <!-- <quan v-if="true"/> -->
  <view  >
    <dao title="设备控制" color="#fff" :left="false" />

    <view style="padding: 20rpx">
      <view
        style="
          display: flex;

          align-items: center;
          justify-content: flex-end;
        "
      >
        <view
          v-if="buxian"
          style="
            width: 500rpx;
            position: absolute;
            z-index: 99999999999;
            left: 50%;
            transform: translateX(-50%);
          "
        >
          <uni-easyinput
            :focus="true"
            prefixIcon="search"
            v-model="search"
            placeholder="请输入型号/名称"
            @iconClick="iconClick"
            @blur="shuqu = !shuqu"
            @focus="shuqu = !shuqu"
            @input="sousu"
          ></uni-easyinput>

          <!-- <view
            :style="{
              height: serchValue.length && shuqu ? '400rpx' : '0',
            }"
            style="
              transition: all 0.2s;
              width: 500rpx;
              overflow: hidden;
              box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.08);
              background-color: #fff;
              border-radius: 20rpx;
              position: absolute;
              z-index: 99999999999;

              text-align: center;
            "
          >
            <view
              style="
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ccc;
              "
            >
              暂无结果</view
            >
          </view> -->
        </view>
        <uni-icons @click="xian" type="search" size="30"></uni-icons>
        <view
          style="width: 48rpx; display: flex; align-items: center"
          @click="bianhua"
        >
          <image
            v-if="mokong"
            style="width: 48rpx; height: 48rpx"
            src="../../static/list.png"
            mode="scaleToFill"
          />
          <image
            v-else
            style="width: 48rpx; height: 48rpx"
            src="../../static/fanga.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <!-- 列表 -->
    </view>
    <view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <view v-if="xuanData.length" :class="{ yuans: mokong }">
          <view
            v-for="(item, index) in xuanData"
            :key="index"
            @click="tiaozhuanx(item.Id)"
            :class="{ zhusan: !mokong }"
            class="gfgd"
            :style="{ width: mokong ? '100%' : '49%' }"
          >
            <mycs
              :value="item.RunningStatus == '0' ? item.Temperature : 0"
              :name="item.Name"
              :mokong="mokong"
              :status="item.RunningStatus"
           
                :continuous=item.ContinuousRunningtime
              url="/static/便携寿司饭团机.png"
              :Duration="item.Duration"
              :color="
                item.RunningStatus == '0'
                  ? [
                      [0.3, '#67e0e3'],
                      [0.7, '#37a2da'],
                      [1, '#fd666d'],
                    ]
                  : [
                      [0.3, '#999'],
                      [0.7, '#666'],
                      [1, '#333'],
                    ]
              "
              :bcolor="item.RunningStatus != '0' ? '#999' : '#4cd964'"
              :MealAllowance="item.TodayTotalMeals"
            />
          </view>
        </view>
        <view class="xianyin" v-else>
                <text style="color: #999"> 暂无设备</text>
              </view>
      </scroll-view>
    </view>
  </view>
  </view>
</template>

<script setup>
import {sousuo} from '../../api/login'
import dao from "../conpments/daohang.vue";
import mycs from "../index/exharts/index.vue";
import { useCounterStore } from "../../stores/counter";

import { ref, reactive, onMounted, inject, computed } from "vue";
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

let mokong = ref(true);
let buxian = ref(false);
let search = ref("");
let shuqu = ref(false);
const counter = useCounterStore();
const token = computed(() => {
  return counter.token;
});
let jieliu=ref(true)
let timer=null
const sousu=()=>{
  if(jieliu){
    console.log(11);
    console.log(timer);
    if(timer){
     clearTimeout(timer)
       timer=null
    }
    jieliu.value=false
    timer = setTimeout(async ()=>{
    const {data}= await sousuo(search.value)
    if(data.code==200){
      xuanData.value=data.data
    }

      jieliu.value=true
},200)
  }

}


let zhenData = computed(() => {
  return [...counter.shouData.Online, ...counter.shouData.Offline];
});
onShow(()=>{
  search.value=''
  xuanData.value=zhenData.value
})

let xuanData=ref([])

const xian = () => {
  buxian.value = !buxian.value;
};
const bianhua = () => {
  mokong.value = !mokong.value;
};

const tiaozhuanx = (e) => {
  if (token.value) {
    uni.navigateTo({
      url: "/subpkg/shebiexiang/index",
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenerPage", {
          data: e,
        });
      },
    });
  } else {
    uni.showToast({
      title: "请先登录！",
      icon: "error",
      duration: 1000,
    });

    setTimeout(() => {
      uni.switchTab({
        url: "../../pages/my/index",
      });
    }, 500);
  }
};
</script>

<style lang="scss" scoped>
::v-deep .is-input-border {
  border-radius: 60rpx;
}

.scroll-Y {
  height: 83vh;
  transition: all 0.3s;
}

.gfgd {
  transition: all 0.3s;
}
.zhusan {
  float: left;
}
.yuans {
  transition: all 0.3s;
}
.xianyin {
  width: 100%;
  height: 100%;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
